import imgQZ from "@/assets/images/visual-screen/qi_zhi.png";

const addImage = (url, params, api, realData) => {
  let lon = realData[params.dataIndex].lng;
  let lat = realData[params.dataIndex].lat;
  let position = api.coord([lon, lat]);
  // let height = api.size([0, 1])[1] * 0.6;
  return {
    type: "image",
    style: {
      image: url,
      x: position[0] - 3,
      y: position[1] - 20,
      width: 20,
      height: 20
    }
  };
};

// eslint-disable-next-line no-unused-vars
export const getOptionsByVsMap = ({
  geoData,
  dataTemp,
  //  scatterData,
  seriesMapData
}) => {
  return {
    grid: {
      top: "1%",
      left: "3%",
      right: "3%",
      bottom: "0%",
      containLabel: true
    },
    tooltip: {
      trigger: "item",
      showDelay: 0,
      transitionDuration: 0.2,
      formatter: params => {
        // let value = (params.value + '').split('.')
        // value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
        // return params.seriesName + '<br/>' + params.name + ': ' + value
        return params.name;
      }
    },
    geo: {
      map: "chongqing",
      aspectScale: 1, //长宽比
      zoom: 1.2, //按当前视角的缩放比
      roam: false, //是否开启平游或缩放
      scaleLimit: {
        min: 1,
        max: 5,
        show: true
      },
      symbolSize: 10,
      regions: geoData,
      label: {
        show: false,
        normal: {
          show: false,
          fontSize: 12,
          color: "#0B0B0B",
          fontWeight: "normal"
        },
        emphasis: {
          show: false,
          color: "#0B0B0B",
          fontSize: 13,
          fontWeight: "bold"
        }
      },

      itemStyle: {
        show: true,
        normal: {
          fontSize: 18,
          areaColor: "#828282",
          // borderColor: "#5F6C77",
          borderWidth: 8, //设置外层边框
          borderColor: "#6AD2F6"
          // shadowColor: "rgba(0,54,255, 1)"
        }
        // emphasis: {
        //   areaColor: "rgba(202,226,56,1)",
        //   borderColor: "#5F6C77",
        //   label: {
        //     show: true,
        //     color: "#0B0B0B",
        //     fontSize: 10,
        //     fontWeight: "bold"
        //   }
        // }
      }
    },
    visualMap: {
      show: false,
      min: 10,
      max: 50000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["#5E9DD6"]
      }
    },
    series: [
      {
        name: "重庆市地图",
        type: "map",
        mapType: "重庆", // 自定义扩展图表类型
        aspectScale: 1, //长宽比
        zoom: 1.2, //按当前视角的缩放比
        coordinateSystem: "geo",
        map: "chongqing",
        selectedMode: "single",
        symbolSize: 10,
        roam: false, //是否开启平游或缩放
        scaleLimit: {
          //滚轮缩放的极限控制
          min: 1,
          max: 5
        },
        itemStyle: {
          normal: {
            fontSize: 18,
            areaColor: "#828282", //背景颜色
            borderColor: "#5F6C77",
            borderWidth: 1,
            label: { show: true, color: "#0B0B0B", fontSize: 10 }
          }, //正常样式
          emphasis: {
            borderColor: "#5F6C77",
            label: {
              show: true,
              color: "#0B0B0B",
              fontSize: 10,
              fontWeight: "bold"
            },
            // areaColor: "#5E9DD6" //背景颜色
            areaColor: "rgba(202,226,56,1)"
          } //鼠标事件区块样式
        },
        data: seriesMapData
        // 自定义名称映射
      },
      // {
      //   name: "散点图",
      //   type: "effectScatter",
      //   coordinateSystem: "geo",
      //   data: scatterData,
      //   symbolSize: function(val) {
      //     if (val && val[2]) {
      //       return val[2] / 100;
      //     } else {
      //       return 0;
      //     }
      //   },
      //   encode: {
      //     value: 2
      //   },
      //   showEffectOn: "render",
      //   rippleEffect: {
      //     brushType: "stroke"
      //   },
      //   hoverAnimation: true,
      //   label: {
      //     formatter: "{b}",
      //     position: "right",
      //     show: false
      //   },
      //   itemStyle: {
      //     color: "rgba(202,226,56,0.5)",
      //     shadowBlur: 10,
      //     shadowColor: "rgba(202,226,56,0.5)"
      //   },
      //   zlevel: 1
      // },
      {
        name: "标记点",
        type: "custom",
        coordinateSystem: "geo",
        renderItem: function(params, api) {
          //具体实现自定义图标的方法
          return addImage(imgQZ, params, api, dataTemp);
        },
        data: dataTemp,
        zlevel: 2
      }
    ]
  };
};
